<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('图书管理')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 th:text="${book.id == null ? '添加图书' : '编辑图书'}">图书表单</h2>
                <a th:href="@{/books/list}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i> 返回图书列表
                </a>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <form th:action="${book.id == null ? '/books/admin/add' : '/books/admin/edit/' + book.id}" 
                          th:object="${book}" method="post" class="needs-validation" novalidate>
                        
                        <!-- 标题 -->
                        <div class="mb-3">
                            <label for="title" class="form-label">书名</label>
                            <input type="text" class="form-control" id="title" th:field="*{title}" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">
                                请输入有效的书名
                            </div>
                        </div>
                        
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label for="author" class="form-label">作者</label>
                            <input type="text" class="form-control" id="author" th:field="*{author}" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('author')}" th:errors="*{author}">
                                请输入作者姓名
                            </div>
                        </div>
                        
                        <!-- ISBN -->
                        <div class="mb-3">
                            <label for="isbn" class="form-label">ISBN</label>
                            <input type="text" class="form-control" id="isbn" th:field="*{isbn}" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('isbn')}" th:errors="*{isbn}">
                                请输入有效的ISBN
                            </div>
                        </div>
                        
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label for="publisher" class="form-label">出版社</label>
                            <input type="text" class="form-control" id="publisher" th:field="*{publisher}" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('publisher')}" th:errors="*{publisher}">
                                请输入出版社
                            </div>
                        </div>
                        
                        <!-- 出版年份 -->
                        <div class="mb-3">
                            <label for="publicationYear" class="form-label">出版年份</label>
                            <input type="number" class="form-control" id="publicationYear" th:field="*{publicationYear}" min="1800" max="2100" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('publicationYear')}" th:errors="*{publicationYear}">
                                请输入有效的出版年份
                            </div>
                        </div>
                        
                        <!-- 描述 -->
                        <div class="mb-3">
                            <label for="description" class="form-label">描述</label>
                            <textarea class="form-control" id="description" th:field="*{description}" rows="3"></textarea>
                        </div>
                        
                        <!-- 库存数量 -->
                        <div class="mb-3">
                            <label for="quantity" class="form-label">库存数量</label>
                            <input type="number" class="form-control" id="quantity" th:field="*{quantity}" min="0" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('quantity')}" th:errors="*{quantity}">
                                请输入有效的库存数量
                            </div>
                        </div>
                        
                        <!-- 可用数量 -->
                        <div class="mb-3">
                            <label for="availableQuantity" class="form-label">可用数量</label>
                            <input type="number" class="form-control" id="availableQuantity" th:field="*{availableQuantity}" min="0" required>
                            <div class="invalid-feedback" th:if="${#fields.hasErrors('availableQuantity')}" th:errors="*{availableQuantity}">
                                请输入有效的可用数量
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="reset" class="btn btn-outline-secondary me-md-2">重置</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
    <script>
        // 表单验证
        (function() {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>
</html>
